{%  extends "back/base.html" %}

<!-- 留槽 样式 -->
{% block style %}
<style>
    .userInfo{
        background-color: white;
        border-radius: 5px;
        padding: 40px;
        box-sizing: border-box;
    }
    .spcific{
        font-size: 16px;
        height: 40px;
        line-height: 40px;


    }
</style>
{% endblock %}

<!-- 留槽 主要内容 -->
{% block body %}
<div class="container-fluid">
    <!-- 客户信息 -->
    <div class="body user-profile">
        <!-- 面包屑 -->
        <ol class="breadcrumb">
            <li><a href="javascript:;">用户管理</a></li>
            <li class="active">用户中心</li>
        </ol>
        <div class="profile" id="userProfile">
            <div class="pull-left">
                <img src="./uploads/avatar.png" class="img-circle pull-left" alt="">
                <span class="name">撩课学院</span>
                <span>喜欢IT, 就上撩课！</span>
            </div>
            <ul class="pull-right list-inline">
                <li>
                    <span>积分</span>
                    <a href="javascript:;">120</a>
                </li>
                <li>
                    <span>等级</span>
                    <a href="javascript:;">10</a>
                </li>
                <li>
                    <span>金币</span>
                    <a href="javascript:;">10000</a>
                </li>
            </ul>
        </div>
        <div class="userInfo">
            
        </div>
    </div>
</div>
{% endblock %}

<!-- 留槽 脚本 -->
{% block script %}
<script>
    $(function () {
        //获取本地token
        let token = localStorage.getItem("token");

        //发起请求
        $.ajax({
            url: "http://localhost:3000/back/user/aip/u_msg/" + token,
            type: "get",
            success: function (data) {
                if (data.status === 200) {
                    
                    //页面数据进行渲染
                    let tmp = `
                    <div class="pull-left">
                        <img src="${data.result[0].icon_url ? '/uploads/' + data.result[0].icon_url : './uploads/avatar.png'}" class="img-circle pull-left" alt="">
                        <span class="name">${data.result[0].real_name}</span>
                        <span>${data.result[0].intro_self}</span>
                    </div>
                    <ul class="pull-right list-inline">
                        <li>
                            <span>积分</span>
                            <a href="javascript:;">${data.result[0].points}</a>
                        </li>
                        <li>
                            <span>等级</span>
                            <a href="javascript:;">${data.result[0].rank}</a>
                        </li>
                        <li>
                            <span>金币</span>
                            <a href="javascript:;">${data.result[0].gold}</a>
                        </li>
                    </ul>
                    `

                    let tpl = `
                        <div class="spcific">
                            <span>手机号：${data.result[0].phone}</span>
                        </div>
                        <div class="spcific">
                            <span>电子邮箱：${data.result[0].e_mail}</span>
                        </div>
                        <div class="spcific">
                            <span>自我介绍：${data.result[0].intro_self}</span>
                        </div>
                    `
                    $("#userProfile").html(tmp);
                    $(".userInfo").html(tpl);


                } else {
                    alert('数据请求失败!');
                }
            }
        });

    })
</script>
{% endblock %}